<template>
  <div id="now">
      <ul>
        <li v-for="item in commingData" :key="item.id">
          <div class="first">
            <img :src="item.img" alt="">
            </div>
          <div class="second">
            <p class="title">{{item.title}}</p>
            <p class="font-color">
              {{item.nums}}人想看
            </p>
            <p class="font-color">{{item.actors}}</p>
            <p class="font-color">未来{{item.day}}天内上映</p>
          </div>
          <div class="third">
            <button>预售</button>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name:'Comming',
  
   methods:{
        getCommingData(){
            var that=this
            // axios.get('/mock/commingData.json')
            axios.get('localhost:8082/api/commingData.json')
                .then(function (response) {
                    console.log(response);
                    if(response.status==200){
                        if(response.data && response.data.commingData){
                            that.commingData=response.data.commingData
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },
    created(){
        this.getCommingData()
    },
    data(){
        return{
            commingData:[]
        }
    }
    
    
  
}
</script>

<style scoped>
#now{
  width: 100%;
  
}
 ul{
   padding: 0;
   
 }
  li{
     display: flex;
   overflow: hidden;
   padding: 10px;
   border-bottom: 1px solid #ccc;
   column-gap: 5px;
 }
  img{
    max-width: 80%;
  }
  
  .title{
    font-weight: 700;
    font-size: 18px;
  }
  p{
    line-height: 25px;
  }
  .first{
    display: flex;
    width: 25%;
    justify-content: center;
  }
  .second{
    width: 55%;
    
    
  }
  .second>p:nth-of-type(3){
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .third{
    display: flex;
    width: 20%;
    text-align: center;
    line-height: 75px;
    justify-content: center;
    align-items: center;
  }
 
 .font-color{
   color: #666;
 }
 button{
   background: #57a1f7;
   width: 45px;
   height: 30px;
   border: none;
   color: white;
   border-radius: 5px;
   
 }
</style>